
<template>
	<view>
		<web-view src="https://sport.luojiweiye.com/web/shipinliu/" style="width: 750rpx; height: 750rpx;"></web-view>
		<!-- <view style="position: absolute; z-index: 2; width: 200rpx; height: 200rpx; background: #ddd;">shipin</view> -->
		<view style="position: fixed; z-index: 2; width: 750rpx;  left: 0; bottom: 0; padding: 20rpx; ">
			<view class="ly" ref="ly" id="ly">
				<scroll-view style="max-height: 700rpx;" scroll-y="true" :scroll-top="childrenId"
					:scroll-with-animation="true" :show-scrollbar="true">
					<view class="lyli" v-for="(item,index) in liaotianlist" :key="index">
						<span class="name">{{item.name}}：</span>{{item.content}}
					</view>
				</scroll-view>
			</view>
			<view class="sr flexci">
				<u-input placeholder="说点什么…" v-model="liuyan" placeholderStyle="color:#fff">
					<template slot="suffix">
						<!-- <view @tap="fabuliuyan" style="background: #FFFFFF; padding: 10rpx 20rpx; border-radius: 5rpx;">发送</view> -->
						<image @tap="fabuliuyan" @confirm="fabuliuyan" src="../../static/assets/img/fa.png"
							style="width: 50rpx; height: 50rpx; position: relative; right: -10rpx;">
					</template>
				</u-input>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liaotianlist:[],
				childrenId: 0,
				liuyan:"",
				person:"",
				receiver_id:3
			}
		},
		onLoad() {
			this.person = JSON.parse(uni.getStorageSync('person')) 
			this.lianjie()
		},
		methods: {
			lianjie: function() {
				let that = this
				// console.log(uni.getStorageSync('token'))
				let liveid = 3
				if(uni.getStorageSync('live_id')){
					liveid = uni.getStorageSync('live_id')
					this.receiver_id = uni.getStorageSync('live_id')
				}
				this.socket = uni.connectSocket({
					url: 'wss://live.weibu.vip/wss/default.io?token=' + uni.getStorageSync('token') + '&live_id=' + liveid, 
					complete: (res) => {
						// console.log(res)
					}
				});
				this.socket.onOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				this.socket.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				this.socket.onMessage(function(res) {
					let obj = JSON.parse(res.data).content
					
					window.frames[0].postMessage("hello","*")
					
					if (obj.talk_type == 2) {
						if (obj.data.msg_type == 1) {
							//聊天处理
							that.shoudaoliaotian(obj.data)
						}
					}
				});
				this.socket.onClose(function(res) {
					let login = that.auth_me()
					login.then((res) => {
						//已经登陆了  获取个人信息连接socket
						this.person = res.data.data
						uni.setStorageSync('person', JSON.stringify(res.data.data))
						this.$nextTick(item => {
							that.lianjie()
						})
					})
				});
			
				setInterval(() => {
					this.socket.send({
						data: `{"event":"heartbeat","content":"ping"}`
					});
				}, 10000)
			},
			shoudaoliaotian: function(obj) {
				this.liaotianlist.push(obj)
				this.$nextTick(item => {
					this.childrenId = (this.liaotianlist.length + 1) * 80
				})
			},
			fabuliuyan: function() {
				if (!this.liuyan) {
					return false
				}
				
				let data = {
					content:this.liuyan,
					count:"",
					created_at: "",
					gift: "",
					group_avatar: "",
					group_name: "柴古定位测试",
					id: "",
					msg_type: "",
					name: this.person.nickname,
					shoubang: "",
					songbang: "",
					talk_type: "",
					user_id: "",
				}
				this.shoudaoliaotian(data)
				
				uni.$u.http.post(this.urlass + '/api/v1/talk/message/text', {
					receiver_id: this.receiver_id,
					talk_type: 2,
					text: this.liuyan,
					token: uni.getStorageSync('token')
				}).then(res2 => {
					if (res2.data.code == 200) {
						this.liuyan = ""
					} else {
						this.$refs.uToast.show({
							message: res2.data.message,
							type: "error"
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.ly{ padding: 20rpx;}
	
	
	.lyli {
		background: rgba(0, 0, 0, 0.3);
		margin-bottom: 15rpx;
		padding: 15rpx 25rpx;
		border-radius: 30rpx;
		color: #fff;
	
		
	}
	
	.name{ color: #76EBFF;}
	
	.sr {
		background: rgba(0, 0, 0, 0.3);
		height: 72rpx;
		padding: 0 20rpx;
		border-radius: 2rpx;
		width: 100%;
		border-radius: 67rpx;
	}
	
	/deep/ .u-input {
		border: 0;
		padding: 0 !important;
		width: 340rpx;
	}
	
	/deep/ .u-input__content__field-wrapper__field {
		color: #FFFFFF !important;
		font-size: 12px !important;
	}
</style>